<template>   
	<view id="paga-search-end"> 
		<m-search className="search-box" @search="search($event)" btnColor="#ffffff" backgroundColor="#ff824b" placeholder="输入终点"></m-search>
		<view class="result-box" v-show="endSiteList.length>0">搜索结果</view>
		<uni-list>
			<uni-list-item :title="item.lineSiteName" 
				:show-extra-icon="true" 
				iconType="ali"
				:extra-icon="{color: '#4cd964',size: '22',type: 'e631'}"
				v-for="(item,index) in endSiteList" 
				:key="index" 
				@click="confirm(item)"
			>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import { createNamespacedHelpers } from 'vuex'
	const { mapState, mapActions,mapMutations } = createNamespacedHelpers('transfer')
	export default {
		components:{uniList,uniListItem,mSearch},
		computed:{
			...mapState(['endSiteList'])
		},
		methods:{
			...mapMutations(['SET_END_SITE']),
			...mapActions(['GET_END_SITE_LIST']),
			search(e){
				const data={
					lineSiteName: e
				}
				this.GET_END_SITE_LIST(data)
					.then((res=>{
						console.log("成功")
					}))
			},
			confirm(item){
				uni.navigateBack({
					delta: 1
				});
				this.SET_END_SITE(item.lineSiteName)
			}
		}
	}
</script>

<style lang="scss">
#paga-search-end{
	width: 100%;
	background-color: #f0f0f4;
}
.result-box{
	margin-top: 20upx;
	height: 80upx;
	line-height: 80upx;
	background-color: #fbfbfc;
	font-size:25upx;
	text-indent: 30upx;
	color: #aaaaaa;
}
.search-box{
	padding: 20upx;
}
</style>
